<template>
	<view>
		<view class="nav">
			<view class="navBar" v-for="(item, index) in navList" :key="index">
				<view :class="{'active':isActive == index}" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view v-if="isActive == 0"></view>
		<view v-if="isActive == 1">
			
		</view>
	    <view class="nav-item" v-if="isActive == 2">
			<block v-for="(item1,index1) in orderList" :key="index1">
				<view class="order">
					<view class="item1">
						<image :src="item1.touxiang" mode="aspectFill"></image>
						<text style="margin-left: 20rpx;">{{item1.username}}</text>
						<text style="margin-right: 19rpx;margin-left: auto;">{{item1.status}}</text>
					</view>
					<view class="item2">下单时间：{{item1.datetime}}</view>
					<view class="line"></view>
					<view class="item3">
						<image :src="item1.productImg" mode="aspectFill"></image>
						<view class="product-info">
							<text style="font-size: 24rpx;color: #1A1A1A;">{{item1.productName}}</text>
							<text style="font-size: 20rpx;color: #666666;">规格:规格一</text>
							<text style="font-size: 20rpx;color: #666666;">￥{{item1.price}} x{{item1.num}}</text>
						</view>
						<view style="font-size: 20rpx;color: #1A1A1A;margin-right: 20rpx;margin-left: auto;margin-top: 80rpx;">
							<text>共{{item1.num}}件</text>
							<text style="margin-left: 20rpx;">展开</text>
						</view>
					</view>
					<view class="line"></view>
					<view class="item4">
						<view style="font-size: 26rpx;color: #1A1A1A;">退货理由:</view>
						<text style="font-size: 24rpx;color: #666666;">{{item1.reason}}</text>
					</view>
					<view class="line" v-if="item1.status == '退款中'"></view>
					<view class="item5" v-if="item1.status == '退款中'">
						<button>拒绝</button>
						<button class="agree">同意退款</button>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>
<script>
export default {
	data(){
		return {
			isActive: 2,
			navList:[
				{
					index:0,
					title:'全部'
				},
				{
					index:1,
					title:'退货'
				},
				{
					index:2,
					title:'退款'
				}
			],
			orderList:[
				{
					touxiang:require("@/static/logo.png"),
					username:'张三三',
					status:'退款中',
					datetime:'2021.03.14 14:20',
					productImg:require("@/static/meat.png"),
					productName:'带皮五花肉（300g)',
					price:14.80,
					num:3,
					reason:'不想要了，不好看，不适合'
				},
				{
					touxiang:require("@/static/logo.png"),
					username:'张三三',
					status:'退款完成',
					datetime:'2021.03.14 14:20',
					productImg:require("@/static/meat.png"),
					productName:'带皮五花肉（300g)',
					price:14.80,
					num:1,
					reason:'不想要了，不好看，不适合'
				}
			]
		}
	},
	methods:{
		checked(index){
			this.isActive = index
		}
	}
}
</script>
<style>
	page {
		background: rgba(245, 245, 245);
	}
	.nav {
		width: 100%;
		height: 80rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.nav .navBar {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}
	.active {
		position: relative;
	}
	.active::after {
		content: '';
		position: absolute;
		background: #FEB140;
		width: 60rpx;
		height: 4rpx;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		margin: auto;
	}
    .nav-item {
		width: 100%;
		height: 100%;
	} 
	.order {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 30rpx;
	}
	.item1 {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top: 20rpx;
		margin-left: 20rpx
	}
	.item1 image {
		width: 40rpx;
		height: 40rpx;
	}
	.item1 text {
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #1A1A1A;
	}
	.item2 {
		margin-left: 20rpx;
		font-size: 20rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
	}
	.line {
		width: 650rpx;
		height: 2rpx;
		margin: 20rpx;
		background: #E5E5E5;
	}
	.item3 {
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
	}
	.item3 image {
		width: 80rpx;
		height: 80rpx;
	}
	.product-info {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-left: 20rpx;
		line-height: 35rpx;
	}
	.item4 {
		margin-left: 20rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		line-height: 40rpx;
	}
	.item5 {
		margin-top: 20rpx;
		margin-left: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		margin-left: 320rpx;
	}
	.item5 button {
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		width: 160rpx;
		height: 40rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		border: 2rpx solid #A0A0A0;
		border-radius: 20rpx;
	}
	.clear {
		clear: both;
	}
	.item5 .agree {
		background: #FEB140;
		border: none;
	} 
</style>
